<template>
  <div class="generalJournal">
    <div class="gj_top">
      <p>单号</p>
      <el-input v-model="receiptsNumber"></el-input>
      <p>账本</p>
      <el-autocomplete
        clearable
        v-model="accountBook"
        :fetch-suggestions="queryAccountList"
        @keyup.enter.native="inputEnter($event)"
      >
      </el-autocomplete>
      <p>科目</p>
      <el-select ref="subjectSelect" v-model="subject">
        <el-option
          v-for="item in subjectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <p>科目明细</p>
      <el-input v-model="subjectInfo"></el-input>
      <p>摘要</p>
      <el-input v-model="abstract"></el-input>
      <p>日期</p>
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-button icon="el-icon-search" @click="searchAccount">查询</el-button>
    </div>

    <div class="operation">
      <el-button :type="detail" icon="el-icon-document" @click="detailClick"
        >明细</el-button
      >
      <el-button
        :type="summary"
        icon="el-icon-document-copy"
        @click="summaryClick"
        >汇总</el-button
      >
      <el-button :type="picture" icon="el-icon-tickets" @click="pictureClick"
        >列图</el-button
      >
      <el-button
        @click="
          () => {
            this.exportExl = true
          }
        "
        icon="el-icon-upload2"
        >导出</el-button
      >
      <el-button icon="el-icon-delete" @click="deleteAccount" :disabled="!it"
        >删除</el-button
      >
    </div>

    <router-view
      :limit="limit"
      :currentPage="currentPage"
      @dataLenChange="
        (a) => {
          this.dataLen = a
        }
      "
      @pagesNumChange="
        (a) => {
          this.pagesNum = a
        }
      "
      @selectAccount="selectAccount"
      @isToday="isToday"
      @searchOver="searchOver"
      @exportFinish="
        () => {
          this.exportExl = false
        }
      "
      @changeAccountBook="
        (l) => {
          this.accountBookList = l
        }
      "
      :searchParams="searchParams"
      :deleted="deleted"
      :exportExl="exportExl"
      :accountBookList="accountBookList"
    >
    </router-view>

    <foot-view
      class="footView"
      :dataLen="dataLen"
      :pagesNum="pagesNum"
      :limit="limit"
      :currentPage="currentPage"
      :hasPagination="$route.path.includes(summary)"
      :pageSize="limit"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <div slot="text">
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import { getAccount, delAccount } from '../../../network/currentAccount'
import { getSubject } from '../../../network/subject'
import footView from '../../../components/FootView'
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

import enterUp from '../../../components/mixins/enterUp'

export default {
  name: 'general_journal',
  mixins: [enterUp],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null

    this.inpList = this.getInput()
    getSubject().then((res) => {
      let list = res.data.data
      list.forEach((e) => {
        this.subjectList.push({ value: e.name, lable: e.name })
      })
    })
    getAccount({ limit: 9999999 }).then((res) => {
      let exist = 0
      res.data.data.forEach((e) => {
        if (!this.accountBookList.length) {
          this.accountBookList.push({ value: e.accountBook })
        }
        for (const i of this.accountBookList) {
          if (i.value == e.accountBook) {
            exist = 1
            break
          }
          exist = 0
        }
        if (!exist) {
          this.accountBookList.push({ value: e.accountBook })
        }
      })
    })
  },
  data() {
    return {
      inpList: [],
      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      id: '',
      deleted: true,
      detail: 'primary',
      summary: '',
      picture: '',
      receiptsNumber: '',
      accountBook: '',
      accountBookList: [],
      subject: '',
      subjectList: [],
      subjectInfo: '',
      abstract: '',
      date: [],
      searchParams: {},
      // 监听导出事件
      exportExl: false,
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
      it: false
    }
  },
  methods: {
    queryAccountList(queryString, cb) {
      cb(this.accountBookList)
    },
    // 输入框按回车失去焦点
    inputEnter(e) {
      let f = document.getElementsByClassName('el-popper')
      f.forEach((f) => {
        f.style.display = 'none'
      })
    },
    searchAccount() {
      this.searchParams = {
        receiptsNumber: this.receiptsNumber,
        accountBook: this.accountBook,
        subject: this.subject,
        subjectInfo: this.subjectInfo,
        summary: this.abstract,
        startTime: this.date[0] ? this.date[0] + ' 00:00:00' : '',
        endTime: this.date[1] ? this.date[1] + ' 23:59:59' : ''
      }
    },
    searchOver() {
      // this.searchParams = {}
      // this.receiptsNumber = ''
      // this.accountBook = ''
      // this.subject = ''
      // this.subjectInfo = ''
      // this.abstract = ''
      // this.date = []
    },
    selectAccount(id) {
      this.id = id
    },
    isToday(b) {
      // console.log(Boolean(b))
      this.it = b
    },
    detailClick() {
      this.detail = 'primary'
      this.summary = ''
      this.picture = ''
      this.$router.push({ path: '/basic_info/general_journal/detail' })
    },
    summaryClick() {
      this.detail = ''
      this.summary = 'primary'
      this.picture = ''
      this.$router.push({ path: '/basic_info/general_journal/summary' })
    },
    pictureClick() {
      this.detail = ''
      this.summary = ''
      this.picture = 'primary'
      this.$router.push({ path: '/basic_info/general_journal/picture' })
    },
    deleteAccount() {
      if (!this.id) {
        this.$alert('请选择要删除的数据', '', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delAccount({ id: this.id }).then((res) => {
            // console.log(res)
            if (res.data.code == 200) {
              this.deleted = !this.deleted
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 每页显示页数改变
    handleSizeChange(val) {
      this.limit = val
      this.currentPage = 1
      // 总页码赋值
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
    }
  },
  components: {
    footView
  },
  watch: {
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    receiptsNumber(a, b) {
      this.receiptsNumber = a.toUpperCase().trim()
    }
  },
  mounted() {
    if (this.$route.path.indexOf('detail') != -1) {
      this.detail = 'primary'
      this.summary = ''
      this.picture = ''
    }
    if (this.$route.path.indexOf('summary') != -1) {
      this.detail = ''
      this.summary = 'primary'
      this.picture = ''
    }
    if (this.$route.path.indexOf('picture') != -1) {
      this.detail = ''
      this.summary = ''
      this.picture = 'primary'
    }
  }
}
</script>

<style scoped>
.generalJournal {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.gj_top {
  padding: 1.5vh 0;
  white-space: nowrap;
  border-bottom: 2px solid #f4f4f4;
}
.gj_top p {
  display: inline-block;
}

.generalJournal .operation {
  margin: 1.5vh 0;
}

.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
</style>

<style>
.gj_top .el-input {
  width: 8vw;
  margin: 0 1.5vh 0 5px;
}
.gj_top .el-input__inner {
  height: 30px;
}
.gj_top .el-date-editor {
  width: 14vw;
  margin: 0 1.5vh 0 5px;
}
.gj_top .el-date-editor .el-range-separator {
  width: 2vw;
}
.generalJournal .el-button {
  padding: 8px 15px;
  margin-right: 12px;
  height: 30px;
}
.generalJournal .el-button + .el-button {
  margin-left: 0;
}
.generalJournal .el-input__icon {
  line-height: 24px;
}
.generalJournal .el-input__inner {
  height: 30px;
}
.generalJournal .el-date-editor .el-range-separator {
  line-height: 22px;
}

.generalJournal .el-col {
  display: inline-block;
}
</style>
